{% extends "layout.html" %}
{% block head %}
  <title>Sign up</title>
{% endblock %}
{% block body %}
  <h1>Sign up</h1>
  <form action="{{ url_for('user.sign_up') }}" method="post" onsubmit="return validateForm(this);">
     <table>
       <tr><td>E-mail</td></tr>
       <tr><td><input type=text class="basic-input" size=30 name=email></td></tr>
       <tr><td>Display Name</td></tr>
       <tr><td><input type=text class="basic-input" size=30 name=username></td></tr>
       <tr><td>Password</td></tr>
       <tr><td><input type=password class="basic-input" size=30 name=password></td></tr>
       <tr><td>
         <div id="item-error">
           <span id="error" class="error">{{ error }}</span>
         </div>
       </td></tr>
       <tr><td><input class="btn btn-primary" type=submit value="Sign up"></td></tr>
     </table>
  </form>
  <script type="text/javascript">
    function validateForm(frm){
      email = frm.elements["email"].value;
      username = frm.elements["username"].value;
      password = frm.elements["password"].value;

      if(email == ''){
        displayError("Email is required.");
        return false;
      }

      if(username == ''){
        displayError("User name is required.");
        return false;
      }
      
      if(password == ''){
        displayError("Password is required.");
        return false;
      }
      
      return true;
    }
    
    function displayError(message){
       item_error = document.getElementById("item-error");
       error = document.getElementById("error");
       if(item_error){
         item_error.style.display = "none";
       }
       
       if(error && message){
          error.innerHTML = message;
          item_error.style.display = "inline";
       }
    }
  </script>
{% endblock %}